<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="info">
				<view class="title">
					交易信息
				</view>
				<u-line></u-line>
				<view class="items">
					<view class="lefts">
						商户名称
					</view>
					<view class="right">
						0.58 - 拉卡拉 - 张三
					</view>
				</view>
				<u-line dashed></u-line>
				<view class="items">
					<view class="lefts">
						收益金额
					</view>
					<view class="right">
						9980
					</view>
				</view>
				<u-line dashed></u-line>
				<view class="items">
					<view class="lefts">
						结算金额
					</view>
					<view class="right">
						10000
					</view>
				</view>
				<u-line dashed></u-line>
				<view class="items">
					<view class="lefts">
						结算时间
					</view>
					<view class="rights">
						2024-3-11 17:34:32
					</view>
				</view>
			</view>
			<view class="return-type">
				<view class="title">
					服务类型
				</view>
				<u-line></u-line>
				<radio-group @change="handleChange">
					<view class="items">
						<view class="lefts">
							没有到账
						</view>
						<view class="rights">
							<label class="radio">
								<radio value="1" :checked="type == 1" />
							</label>
						</view>
					</view>
					<u-line dashed></u-line>
					<view class="items">
						<view class="lefts">
							费率有疑问
						</view>
						<view class="rights">
							<label class="radio">
								<radio value="2" :checked="type == 2" />
							</label>
						</view>
					</view>
					<u-line dashed></u-line>
					<view class="items">
						<view class="lefts">
							其他问题
						</view>
						<view class="rights">
							<label class="radio">
								<radio value="3" :checked="type == 3" />
							</label>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="description">
				<u--textarea v-model="description" placeholder="写其他意见和建议" height="120" maxlength="100" count></u--textarea>
			</view>
			<view class="btn" @click="btnSave">
				提 交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				id: '',
				userinfo: {},
				type: 1,
				description: '',
			}
		},
		onLoad(e) {
			this.userinfo = uni.getStorageSync('userinfo');
			if (e.id) {
				this.id = e.id
			}
			this.loadData()
		},
		methods: {
			// 加载数据
			async loadData() {
				this.loadding = false
			},
			// 选择
			handleChange(e) {
				this.type = e.detail.value
			},
			// 提交
			btnSave() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定提交吗？',
					success: function(res) {
						if (res.confirm) {
							that.btnSaveFun()
						}
					}
				});
			},
			// 提交 - 方法
			async btnSaveFun() {
				var that = this
				if (this.is_true) {
					this.is_true = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'v1/saveFlowReward',
						data: {
							flow_id: this.id,
							type: this.type
						},
						header: {
							'token': this.userinfo.token
						}
					});
					this.is_true = true
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					if (res.code == 1) {
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						},1500)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	
	.all-main {
		.main {
			padding: 30rpx;
			
			.info {
				background-color: #ffffff;
				padding: 0 20rpx;
				
				.title {
					padding: 20rpx 0;
					font-weight: bold;
				}
				
				.items {
					font-size: 26rpx;
					padding: 16rpx 0;
					display: flex;
					justify-content: space-between;
				}
			}
			
			.return-type {
				margin-top: 30rpx;
				padding: 0 20rpx;
				background-color: #ffffff;
				
				.title {
					padding: 20rpx 0;
					font-weight: bold;
				}
				
				.items {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
				}
			}
			
			.description {
				padding: 30rpx 0;
				margin-bottom: 100rpx;
			}
			
			.btn {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 30rpx;
				background-color: #2979ff;
				color: #ffffff;
				font-weight: bold;
				text-align: center;
			}
		}
	}
</style>
